import React,{Component} from "react";
import {NavBar,List,Icon,InputItem,Grid} from 'antd-mobile'
import {connect} from 'react-redux'

import {sendMsg,UpdateReadMsg} from '../../redux/actions'
import './chat.css'
const Item = List.Item
class Chat extends Component{
    constructor() {
        super();
        const emjs = [
            '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆',
            '😉', '😊', '😋', '😎', '😍', '😘', '😗', '😙',
            '😚','🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🦝',
            '🐻', '🐼', '🦘', '🦡', '🐨', '🐯', '🦁', '🐮',
            '🐷', '🐽', '🐸', '🐵', '🙈','🐢', '🐍', '🦎', '🦎'
        ]
        this.emjs = emjs.map((emj)=>({text:emj}))
        console.log("这是表情",this.emjs)
    }
//初始状态没有文本，表情不显示
    state={content:"",initemj:false}
    handleClick=()=>{
        const from = this.props.user._id
        const to  = this.props.match.params.userid
        const content = this.state.content.trim()
        if (content){
            this.props.sendMsg({from,to,content})
            this.setState({content:""})
        }
    }
    showEmjs=()=>{
        this.setState({initemj:true})
    }
    hideEmjs=()=>{
        this.setState({initemj:false})
    }
    //显示聊天页面的最下面
    componentDidMount() {
        window.scrollTo(0,document.body.scrollHeight)
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        window.scrollTo(0, document.body.scrollHeight)
    }

    //退出聊天室的时候更新已读消息的数量
    componentWillUnmount() {
        const from = this.props.match.params.userid
        const to = this.props.user._id
        //测试代码
        console.log("我执行了",from,to)
        this.props.UpdateReadMsg({from,to})
    }

    render() {
        //这个是表情的功能模块
        const {content,initemj} = this.state
        //得到聊天界面所需的数据
        const {user} = this.props
        const {users,chatMsgs} = this.props.chatmsg
        //输出一下
        console.log("这是聊天界面的",user,users,chatMsgs)
        //从当前的所有相关聊天记录中筛选出对应用户id的聊天消息
        //获取双方的id
        const me_id = user._id

   //-------------------------------------------------------------------------------------
        if (!users||!user||!chatMsgs){
            return null
        }
        //控制语句，如果数据还没有回来不能显示页面，不加这个控制语句报错
        if (!users[me_id]){
            console.log("数据正在加载中")
            return <div>请稍等</div>
        }
        //-------------------------------------------------------------------------------------
        const target_id = this.props.match.params.userid
        const target_chat_id =[me_id,target_id].sort().join('_')
        //开始筛选
        const target_msg = chatMsgs.filter(msg=>target_chat_id===msg.chat_id)
        console.log("这是聊天记录",target_msg)
        //找到对方和自己的聊天头像
        const my_header = user.header
        //开始有bug，
        //bug发现，请求数据的方式是异步执行的，开始的时候us
        // ers中是没有数据的，所以要在前面加控制语句
        const target_header = users[target_id].header
        const myhead_icon = require("../../assets/headers/"+my_header+".png")
        const targethead_icon = target_header ? require("../../assets/headers/"+target_header+".png"):null
        const target_name = users[target_id].username
        //测试代码
        console.log("我的id",me_id)
        console.log("对方id",target_id)
        return(
           <div className="chat_div">
                 <NavBar className='margin'
                    mode="dark"
                   icon={<Icon type='left'></Icon>}
                    onLeftClick={()=>this.props.history.goBack(-1)}
                >{target_name}</NavBar>
                <List className="List" style={{marginTop:45 , marginBottom:45}}>
                    {
                        (target_msg||[]).map((msg)=>{
                            if (msg.from===target_id){
                                //这是对方发来的消息，
                                return(
                                    <Item thumb={targethead_icon}
                                          wrap={true}
                                          key={msg._id}>
                                        <span>{msg.content}</span></Item>
                                )
                            }
                            else{
                                return (
                                    <Item thumb={myhead_icon}
                                          className='chat-me'
                                          wrap={true}
                                          key={msg._id}>
                                        <span>{msg.content}</span></Item>
                                )
                            }
                        })
                    }
                </List>
                <div className="input_item">
                    <InputItem placeholder="请输入"
                               value={this.state.content}
                               onChange={(val)=>this.setState({content:val})}
                               extra={<span>
                                   {/*设置点击显示或者隐藏表情*/}
                                   {
                                       !initemj ?  <span onClick={this.showEmjs}>🔞</span>:null

                                   }
                                   {
                                       initemj ?  <span onClick={this.hideEmjs}>㊙</span>:null
                                   }
                                   <span onClick={this.handleClick} style={{marginLeft:5}}>发送</span>
                               </span>}
                    />
                    {
                        initemj ?
                            <Grid
                            data={this.emjs}
                            columnNum={8}
                            onClick={(item)=>this.setState({content: content+item.text})}
                        /> :null
                    }
                </div>
            </div>
        )
    }
}
export default connect(
    state=>({user:state.user,chatmsg:state.chatmsg}),
    {sendMsg,UpdateReadMsg}
)(Chat)
{/* <Item thumb={require("../../assets/headers/头像1.png")} wrap={true}>
                        <span>你好</span></Item>
                    <Item thumb={require("../../assets/headers/头像1.png")} wrap={true}>
                        <span>明天可以面试吗？发发发发阿发发啊发阿发啊啊</span></Item>
                    <Item thumb={require("../../assets/headers/头像2.png")}
                          className='chat-me'>
                        <span>可以的</span></Item>
                    <Item thumb={require("../../assets/headers/头像2.png")}
                          className='chat-me'>
                        <span>什么时候呢？</span></Item>*/}